<!doctype html>
<html lang="en">
<head>

<?php include './inc/css.html'; ?>

<style type="text/css">

</style>

</head>
<body>
<div class="floaticon top ion-android-arrow-up"></div>
<?php include './inc/header.html'; ?>
<!-- 轮播图 -->
<!-- <div class="line1"></div> -->
<div id="banner-home" class="swiper-container ">
    <div class="swiper-wrapper">
        <?php for ($i=1;$i<3;$i++) { ?>
           <div class="swiper-slide" style="background-image:url(../../assets/img/slider<?php echo $i; ?>.jpg)">
            <a class="_text_secondary tc" href="javascript:void(0);" swiper-animate-effect="fadeIn" swiper-animate-duration="0.3s" swiper-animate-delay="0.1s">
                <p class="bannertitle lh4 ani" swiper-animate-effect="<?php echo $i%2?'fadeInDown':'fadeInLeft'; ?>" swiper-animate-duration="0.5s" swiper-animate-delay="0.1s">最好的职业教育服务者</p>
                <p class="bannersubtitle lh2 ani" swiper-animate-effect="<?php echo $i%2?'fadeInUp':'fadeInRight'; ?>" swiper-animate-duration="0.8s" swiper-animate-delay="0.3s">新职教新实训</p>
            </a>
           </div>
        <?php } ?>
    </div>
    <!-- 如果需要滚动条 -->
    <!-- <div class="swiper-scrollbar"></div> -->
</div>

<div class="wrap" id="home">


<!-- Start 新闻资讯 -->
<div class="sectionheader tc clearfix limit-width">
    <div class="sectiontitle">新闻资讯</div>
    <div class="sectionsubtitle">最新动态</div>
    <a href="./information.php" class="more lh4 tc"><span class="tran3">查看更多</span></a>
</div>
<div class="light-background">
     <!-- 缩略图自定义内容 -->
    <div class="section clearfix limit-width">
        <div class="row list" id="newslist">
           <?php include './inc/informationlist.html'; ?>
        </div>
    </div>
</div>
<!-- End 新闻资讯 -->
<div class="line1"></div>
<!-- Start 课程-->
<div class="sectionheader tc clearfix limit-width">
    <div class="sectiontitle">实训室</div>
    <div class="sectionsubtitle">实操出真知</div>
</div>
<div class="section clearfix limit-width">
    <!-- 缩略图自定义内容 -->
    <div class="row">
      <div class="col-xs-4">
        <a href="./trainroom.php#trainroom">
          <div class="icon tc wow slideInLeft" data-wow-duration="1s"  data-wow-offset="10"  data-wow-iteration="1">
            <span class="ion-settings tran3" ></span>
            <div class="icon-caption">
              实训室
            </div>
          </div>
        </a>
      </div>  

      <div class="col-xs-4">
        <a href="./trainroom.php#experts">
          <div class="icon tc wow fadeIn" data-wow-duration="1s"  data-wow-offset="10"  data-wow-iteration="1">
            <span class="ion-ios-person-outline tran3"></span>
            <div class="icon-caption">
             在线专家
            </div>
          </div>
        </a>
      </div> 

       <div class="col-xs-4">
        <a href="./repair_add.php">
          <div class="icon tc wow slideInRight" data-wow-duration="1s"  data-wow-offset="10"  data-wow-iteration="1">
            <span class="ion-document-text tran3"></span>
            <div class="icon-caption">
              快速报修
            </div>
          </div>
        </a>
      </div>
    </div>
</div> 

<div class="line1"></div>
<!-- 缩略图自定义内容 -->
<!-- Start 新闻资讯 -->
<div class="sectionheader tc clearfix limit-width">
    <div class="sectiontitle">课程专区</div>
    <div class="sectionsubtitle">最新动态</div>
    <a href="./course.php" class="more lh4 tc"><span class="tran3">查看更多</span></a>
</div>
<div class="light-background">
     <!-- 缩略图自定义内容 -->
    <div class="section clearfix limit-width">
      <div class="row">

          <div class="col-xs-12">

                <div id="courselist-home" class="swiper-container ">
                    <div class="swiper-wrapper">
                        <?php for ($i=1;$i<5;$i++) { ?>
                           <div class="swiper-slide" style="background-image:url(../../assets/img/slider<?php echo $i%2+1; ?>.jpg)">
                              <a href="./course_detail.php?i=1">
                                <div class="section-item clearfix tran3 wow fadeIn" data-wow-duration="1s"  data-wow-offset="10"  data-wow-iteration="1">
                                  <div class="item-img tran3 fl" style="background-image:url(../../assets/img/course<?php echo $i%3+1; ?>.jpg)" ></div>
                                  <div class="item-caption  fr pc50 op6">
                                    <p class="caption-title">课程<?php echo $i; ?>标题</p>
                                    <p class="caption-subtitle threeline">课程描述课程描述课程描述课程描述课程描述课程描述课程描述课程描述课程描述课程描述课程描述课程描述课程描述课程描述课程描述课程描述课程描述课程描述</p>
                                    <p>
                                    <span class="caption-user">某某老师</span><span class="caption-time">2017-01-01</span>
                                        <a href="./course_detail.php?i=1" class="more lh4 tc"><span class="tran3">查看详细</span></a>
                                    </p>
                                  </div>
                                </div>
                              </a>
                           </div>
                        <?php } ?>
                    </div>
                    <!-- 如果需要滚动条 -->
                    <!-- <div class="swiper-scrollbar"></div> -->
                    <div class="swiper-pagination  _text_secondary"></div>
                </div>
          </div>  


        </div>
    </div>
</div>
<!-- End 新闻资讯 -->


<div class="dbpages  limit-width tc dn">
    <ul>
        <li><a href="">1</a></li>
        <li><a href="">2</a></li>
        <li><a href="">3</a></li>
        <li><a href="">4</a></li>
        <li><a href="">5</a></li>
    </ul>
</div>
   
<!-- End 课程-->

<div class="line1"></div>

</div>
<?php include './inc/footer.html'; ?>
</body>

<?php include './inc/js.html'; ?>
<script type="text/javascript">
$(document).ready(function(){
  // 初始化轮播图
  var bannerSwiper = new Swiper ('#banner-home', {
        autoplay: {
          delay: 10000,
        },
        effect : 'fade',
        fade: {
          crossFade: false,
        },

        autoplayDisableOnInteraction:false,

        on:{
          init: function(){
            swiperAnimateCache(this); //隐藏动画元素 
            swiperAnimate(this); //初始化完成开始动画
          }, 
          slideChangeTransitionEnd: function(){ 
            swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
          } 
        }
        // scrollbar: '.swiper-scrollbar'
    } ) ;

  var courseSwiper = new Swiper ('#courselist-home', {
        autoplay: {
          delay: 5000,
        },
        loop:true,
        pagination: {
          el: '.swiper-pagination',
          bulletElement : 'li',
        },

        // effect : 'cube',
        // cubeEffect: {
        //   slideShadows: true,
        //   shadow: true,
        //   shadowOffset: 100,
        //   shadowScale: 0.6
        // },       

    } ) ;

    // new WOW().init();

})

</script>
</html>